<!--
 * relative     : \src\components\dynamicTable\recursiveTableColumn.vue
 * Author       : 郭鹏超
 * Date         : 2024-11-16 14:41
 * LastEditors  : 苏军志
 * LastEditTime : 2025-01-22 15:48
 * Description  : 递归表头 解决多级表头无限嵌套问题
 * CodeIterationRecord: 
 -->
<template>
  <el-table-column
    :prop="item.columnAttribute.prop"
    :width="item.columnAttribute.width"
    :min-width="item.columnAttribute.minWidth"
    :align="item.columnAttribute.align"
    :fixed="!item.columnAttribute?.fixedPosition ? undefined : item.columnAttribute?.fixedPosition"
    :sortable="item.sortFlag"
  >
    <template #header>
      <span v-html="item.columnShowName"></span>
    </template>
    <template v-slot="scope">
      <header-column :item="item" v-model:scope="tableData[scope.$index]"></header-column>
      <div v-if="item.columnAttribute.style === 'slot' && item.columnAttribute.slotName">
        <slot :name="item.columnAttribute.slotName" :row="scope.row"></slot>
      </div>
      <template v-if="children.length">
        <template v-for="(child, index) in children" :key="index">
          <recursive-table-column :item="child" :tableData="tableData" :innerHeaderList="innerHeaderList" />
        </template>
      </template>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
import headerColumn from "./dynamicColumn.vue";
const props = defineProps({
  item: {
    type: Object as PropType<Record<string, any>>,
    default: () => {
      return {};
    }
  },
  tableData: {
    type: Array as PropType<Record<string, any>[]>,
    default: () => {
      return [];
    }
  },
  innerHeaderList: {
    type: Array as PropType<Record<string, any>[]>,
    default: () => {
      return [];
    }
  }
});

/**
 * @description: 计算子级列
 * @param computed
 * @return
 */
const children = computed(() => {
  return props.innerHeaderList.filter((child) => child.level === props.item.level + 1 && child.parentID === props.item.columnID);
});
</script>
